<template>
  <div class="upload-container">
    <div class="upload-inline">
      <div class="upload-item" v-for="(item, index) in images" :key="index" @mouseenter="handleMouseEnter(item)"
        @mouseleave="handleMouseLeave(item)">
        <el-image :src="item.url">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <div @click="handleDelete(index)" v-show="item.showDel" class="delete">
          <i class="fa fa-trash-o"></i>
        </div>
      </div>
      <div class="upload-item upload-add" v-if="images.length < max">
        <input type="file" ref="fileInput" :key="fileKey" @change="onFileSelected" accept=".jpg,.jpeg,.png" />
        <i class="el-icon-plus"></i>
      </div>
    </div>
  </div>
</template>

<script>
import * as uploadApi from '@/api/admin/uploadApi';

export default {
  props: {
    defaultImags: {
      type: Array,
      default: [],
    },
    max: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      images: [],
      fileKey: 0,
      isUpdate: false
    }
  },
  methods: {
    onFileSelected(event) {
      var self = this;
      const formData = new FormData();
      const file = event.target.files[0];
      formData.append("mediaFile", file);
      if (file.size > 2 * 1024 * 1024) {
        self.$message.error('上传的图片大小不能大于2mb');
        return false;
      }
      uploadApi.uploadImage(formData)
        .then(res => {
          if (res.errno == 0) {
            self.isUpdate = true;
            self.images.push({ url: res.data.url, showDel: false });
          }
          else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          self.$message.error('上传图片接口发生错误');
        });
      self.fileKey += 1;//解决重复选中图片不触发change问题
    },
    handleMouseEnter(item) {
      item.showDel = true;
    },
    handleMouseLeave(item) {
      item.showDel = false;
    },
    handleDelete(index) {
      var self = this;
      self.isUpdate = true;
      self.images.splice(index, 1);
    },
  },
  watch: {
    images: {
      handler(newValue, oldValue) {
        if (this.isUpdate) {
          let imgs = [];
          newValue.some((item) => {
            imgs.push(item.url);
          });
          this.$emit('upload-images', imgs)
          this.isUpdate = false;
        }
      }
    },
    defaultImags(newValue, oldValue) {
      var self = this;
      var arr = [];
      self.defaultImags.some(item => {
        arr.push({ url: item, showDel: false });
      });
      self.images = arr;
    }
  }
}
</script>

<style scoped>
.upload-container {}

.upload-inline {
  display: flex;

}

.upload-item {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  width: 120px;
  height: 120px;
  margin-top: 20px;
  padding: 5px;
  position: relative;
}

.upload-item+.upload-item {
  margin-left: 10px;
}

.upload-item .el-image__inner {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

.upload-item .el-image {
  height: 100%;
  width: 100%;
}

.upload-item .delete {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  cursor: pointer;
}

.delete i {
  color: #fff;
  line-height: 120px;
  font-size: 26px;
}

.upload-add {
  position: relative;
  text-align: center;
  line-height: 120px;
  color: #c0ccda;
  font-size: 22px;
}

.upload-add input[type='file'] {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  opacity: 0;
  cursor: pointer;
}
</style>